<template>
  <div class="register-container">
    <!-- main 部分 -->
    <div class="main">
      <div class="content">
        <h3>欢迎注册</h3>
        <form id="register">
          <div class="select">
            <label for="Role" style="margin-right: 30px">Role</label>
            <select id="select-role" v-model="role">
              <option>管理员</option>
              <option>教师</option>
              <option>学生</option>
            </select>
            <span>请选择您的注册身份</span>
          </div>
          <div class="uname">
            <label for="uname">Username</label>
            <input type="text" class="form-control" placeholder="请输入学号" id="uname" v-model.trim="uname" @blur="unameReg" />
            <span style="color: red" v-show="uWrong">您输入的学号位数有误，请重新输入</span>
          </div>
          <div class="pwd">
            <span class="visible" @click="pwdVisible"></span>
            <label for="pwd">Password</label>
            <input type="password" class="form-control" placeholder="请设置密码，密码由8-16位字符组成" id="pwd" v-model.trim="pwd" @blur="pwdReg" />
            <span style="color: red" v-show="pWrong">密码由8到16位字符组成</span>
          </div>
          <div class="pwdC">
            <span class="visible" @click="pwdVisible"></span>
            <label for="pwdCommit">PasswordCommit</label>
            <input type="password" class="form-control" placeholder="请确认密码" id="pwdCommit" v-model.trim="pwdCommit" @blur="pwdCReg" />
            <span style="color: red" v-show="pEmpty">请先设置密码</span>
            <span style="color: red" v-show="pcWrong">两次输入密码不一致，请重新确认</span>
          </div>
          <div class="tel">
            <label for="tel">Tel</label>
            <input type="tel" class="form-control" placeholder="请绑定您的手机号" id="tel" v-model.trim="telno" @blur="telReg" />
            <span style="color: red" v-show="telWrong">您输入的手机号码不存在</span>
          </div>
          <input type="button" value="提交注册" class="btn submit" id="submit" @click="check" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: '管理员',
      uname: 'admin',
      pwd: 'admin',
      pwdCommit: 'admin',
      telno: '13479929688',
      uWrong: false,
      pWrong: false,
      pEmpty: false,
      pcWrong: false,
      telWrong: false,
    }
  },
  methods: {
    // 密码是否可见
    pwdVisible(e) {
      this.visible = !this.visible
      if (this.visible) {
        // 图标改为可见，输入框改为text类型
        e.target.innerHTML = ''
        e.target.nextElementSibling.nextElementSibling.type = 'text'
      } else {
        e.target.innerHTML = ''
        e.target.nextElementSibling.nextElementSibling.type = 'password'
      }
    },
    // 正则验证用户名
    unameReg(e) {
      var uReg = /^\d{12}$/
      if (!uReg.test(this.uname)) {
        this.uWrong = true
      } else {
        this.uWrong = false
      }
    },
    // 正则验证密码：密码由8-16位字符组成
    pwdReg(e) {
      var pReg = /^\w{8,16}$/
      if (!pReg.test(this.pwd)) {
        // 密码不符合
        this.pWrong = true
      } else {
        this.pWrong = false
      }
    },
    // 验证确认密码是否正确
    pwdCReg(e) {
      // 检查密码是否为空
      if (this.pwd === '') {
        this.pEmpty = true
        this.pcWrong = false
      } else {
        // 确认密码是否和密码输入一致
        if (this.pwdCommit !== this.pwd) {
          this.pcWrong = true
        } else {
          this.pcWrong = false
        }
        // 注意把pEmpty标志位修改为false，因为此时密码不为空了
        this.pEmpty = false
      }
    },
    // 正则验证手机号码
    telReg() {
      var tReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (!tReg.test(this.telno)) {
        this.telWrong = true
      } else {
        this.telWrong = false
      }
    },
    // 提交注册：需要检查输入框是否有空，以及span是否不是空
    // 如果检查通过，则提交用户信息：role，uname，pwd，telno
    check() {
      this.unameReg()
      this.pwdReg()
      this.pwdCReg()
      this.telReg()
      if (this.uWrong === false && this.pWrong === false && this.pcWrong === false && this.telWrong === false) {
        let user = {}
        user.role = this.role
        user.uname = this.uname
        user.pwd = this.pwd
        user.telno = this.telno
        console.log(user)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  height: 550px;
  background-color: rgba(241, 243, 244);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.content {
  width: 400px;
  height: 500px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.content h3 {
  display: block;
  width: 360px;
  height: 30px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.content form {
  display: block;
  width: 360px;
  height: 450px;
  font-size: 16px;
  color: #000;
  box-sizing: border-box;
  padding: 20px;
}
#register > div {
  position: relative;
  width: 360px;
  height: 75px;
}
#register > div > label {
  display: block;
}
#register > div > input {
  width: 300px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#select-role {
  position: absolute;
  border: 1px solid #ccc;
  width: 80px;
  height: 30px;
}
.select span {
  position: absolute;
  font-size: 16px;
  right: 120px;
  color: #ccc;
}
.uname,
.pwd,
.pwdC,
.tel {
  position: relative;
}
.uname span,
.pwd span,
.pwdC span,
.tel span {
  display: block;
  font-size: 14px;
}
.pwd::before,
.uname::before,
.pwdC::before,
.tel::before {
  position: absolute;
  top: 30px;
  left: 10px;
  content: '';
  font-family: 'icomoon';
}
.uname::before {
  content: '';
}
.pwdC::before {
  content: '';
}
.tel::before {
  content: '';
}
#uname,
#pwd,
#pwdCommit,
#tel {
  padding-left: 30px;
}
.visible {
  font-family: 'icomoon';
  color: #000;
  font-size: 18px;
  position: absolute;
  top: 27px;
  right: 70px;
}
.visible:hover {
  cursor: pointer;
}
.content .btn {
  display: block;
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  margin: 0 auto;
  border-radius: 5px;
}
</style>
